<template>
  <div>
    <Modal
      :value="value"
      title="选择工序"
      @on-visible-change="handleVisibleChange"
      @on-ok="handleOkClick"
      width="680"
      loading
      :styles="{top: '40px'}"
    >
      <div class="search-form-wrapper">
        <Form class="search-form" ref="searchForm" :model="form" inline>
          <div>
            <!-- <FormItem prop="partition">
              <Input v-model="form.partition" placeholder="请输入分部名称" />
            </FormItem>-->
            <FormItem prop="work">
              <Input v-model="form.work" placeholder="请输入工序名称" />
            </FormItem>
          </div>
          <FormItem>
            <Button @click="handleSearchClick" type="primary">查询</Button>
            <Button @click="handleResetForm">重置</Button>
          </FormItem>
        </Form>
      </div>
      <Table
        @on-selection-change="handleSelectChange"
        ref="tableRef"
        border
        :columns="tableColumns"
        :data="data"
        stripe
      ></Table>

      <div class="page-wrapper clearfix">
        <Page
          :total="total"
          size="small"
          show-sizer
          show-total
          :current="page"
          @on-change="handlePageChange"
          @on-page-size-change="handlePageSizeChange"
        />
      </div>
    </Modal>
  </div>
</template>

<script>
import { getNodeUseWorks, saveWorks } from '@/api/checkout.js';

export default {
  model: {
    prop: 'value',
    event: 'on-visible-change'
  },
  props: {
    value: Boolean,
    nodeId: Number | String
  },
  data () {
    return {
      form: {
        // partition: '',
        work: ''
      },

      tableColumns: [
        {
          type: 'selection',
          width: 50,
          align: 'center'
        },
        {
          title: '行业',
          key: 'ptypename'
        },
        {
          title: '单位工程',
          key: 'dwname'
        },
        {
          title: '分部工程',
          key: 'fbname'
        },
        {
          title: '工序名称',
          key: 'gxname'
        },
        {
          title: '分项',
          key: 'fxname'
        }
      ],
      data: [
        {
          tradeMame: '公路',
          unitName: '路基工程',
          branchName: '路基土石方工程',
          gongxuName: '填前碾压'
        }
      ],

      tableSelection: [], // 表格多选
      total: 100,
      page: 1,
      pageSize: 10
    };
  },
  watch: {
    value: {
      handler: function (val) {
        if (val) {
          this.getNodeUseWorks();
        }
      },
      immediate: true
    }
  },
  methods: {
    async getNodeUseWorks () {
      try {
        const data = {
          nodeId: this.nodeId,
          pageNum: this.page,
          pageSize: this.pageSize
        };

        if (this.form.work) {
          data.searchStr = this.form.work;
        }

        // console.log('可用工序列表 req=>', data);
        const resp = await getNodeUseWorks(data);
        // console.log('可用工序列表 res=>', resp);
        this.data = resp.data.data;
        this.total = resp.data.total;
      } catch (error) {
        console.error(error);
      }
    },
    handleVisibleChange (visible) {
      this.$emit('on-visible-change', visible);
    },
    handleSelectChange (selection) {
      this.tableSelection = selection;
    },
    handleResetForm () {
      this.$refs.searchForm.resetFields();
      this.getNodeUseWorks();
    },
    handleSearchClick () {
      this.getNodeUseWorks();
    },
    handlePageChange (page) {
      this.page = page;
      this.getNodeUseWorks();
    },
    handlePageSizeChange (pageSize) {
      this.pageSize = pageSize;
      this.getNodeUseWorks();
    },
    async handleOkClick () {
      try {
        const gongxuIds = this.tableSelection.map(item => {
          return item.id;
        }).join(',');

        const data = {
          parentId: this.nodeId,
          gongxuIds: gongxuIds
        };

        // console.log('批量保存工序 req=>', data);
        // const resp =
        await saveWorks(data);
        // console.log('批量保存工序 res=>', resp);
        this.$emit('on-visible-change', false);
        this.$emit('on-save-success');
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.search-form {
  display: flex;
  justify-content: space-between;
  /deep/ .ivu-input {
    width: 130px;
  }
  .ivu-btn:first-child {
    margin-right: 10px;
  }
}
/deep/ .ivu-table td {
  height: 40px;
}
/deep/ .ivu-modal-body {
  padding-bottom: 5px;
}
.page-wrapper {
  .ivu-page {
    float: right;
    margin: 10px 0;
  }
}
</style>
